<template>
  <div class="container">
    <!-- 顶部操作区 -->
    <div class="header-container">
      <div class="primary-action">
        <el-button type="primary" @click="handleAddData" icon="el-icon-plus" >
          <p style="margin-left: -15px">新增调整</p>
        </el-button>
        <!--        <div class="action-count" v-if="selectedRows.length">
                  已选中 {{ selectedRows.length }} 项
                </div>-->
      </div>

      <div class="primary-action">

        <el-button type="success"  @click="handleDownloadExcel" circle style="width: 120px">
          <el-icon name="Document">下载Excel</el-icon>
        </el-button>
      </div>
    </div>

    <!-- 高级筛选面板 -->
    <div class="filter-panel">
      <h3 class="filter-title">筛选条件</h3>
      <div class="form-grid">
        <!-- 时间范围 -->
        <div class="form-item" >
          <label class="form-label">时间范围</label>
          <div class="date-range" style="width: 420px">
            <el-date-picker
                v-model="filterForm.start_date"
                type="datetime"
                placeholder="开始时间"
                style="width: 320px;"
            />
            <span class="date-separator">—</span>
            <el-date-picker
                v-model="filterForm.end_date"
                type="datetime"
                placeholder="结束时间"
                style="width: 320px;"
            />
          </div>
        </div>

        <!-- 状态筛选 -->
        <div class="form-item1">
          <label class="form-label">审批状态</label>
          <el-select v-model="filterForm.revstatus" placeholder="全部状态" style="width: 150px;">
            <el-option
                v-for="item in ['所有','已批准', '已拒绝', '待审批']"
                :key="item"
                :label="item"
                :value="item"
            />
          </el-select>
        </div>

        <div class="form-item2">
          <label class="form-label">部门审批</label>
          <el-select v-model="filterForm.department_approval" placeholder="全部状态" style="width: 150px;">
            <el-option
                v-for="item in ['所有','已批准', '已拒绝', '待审批']"
                :key="item"
                :label="item"
                :value="item"
            />
          </el-select>
        </div>

        <div class="form-item3">
          <label class="form-label">教师信息</label>
          <el-input
              v-model="filterForm.teacher_name"
              placeholder="姓名/工号搜索"
              clearable
              style="width: 180px;"
          >
            <template #prefix>
              <el-icon name="User" style="margin-left: -24px;"></el-icon>
            </template>
          </el-input>
        </div>
        <div>
          <el-button type="primary" @click="handleFilter"  style="width: 120px">
          <el-icon name="Refresh">刷新(查询)</el-icon>
        </el-button></div>

        <!-- 高级选项 -->
        <div class="advanced-options">
          <!-- 可扩展的高级筛选区域 -->
        </div>
      </div>
    </div>


    <!-- 批量操作 -->
    <!-- 批量操作 -->
    <div class="batch-actions">
      <div class="batch-buttons">
        <el-button
            type="success"
            size="small"
            @click="handleClickApproveOK1(selectedRows)"
            :disabled="!selectedRows.length"
        >
          教务员通过
        </el-button>
        <el-button
            type="danger"
            size="small"
            @click="handleClickApproveNO1(selectedRows)"
            :disabled="!selectedRows.length"
        >
          教务员拒绝
        </el-button>
        <el-button
            type="success"
            size="small"
            @click="handleClickApproveOK2(selectedRows)"
            :disabled="!selectedRows.length"
        >
          系部通过
        </el-button>
        <el-button
            type="danger"
            size="small"
            @click="handleClickApproveNO2(selectedRows)"
            :disabled="!selectedRows.length"
        >
          系部拒绝
        </el-button>
      </div>
      <div v-if="selectedRows.length" class="action-count">
        已选中 {{ selectedRows.length }} 项
      </div>
    </div>
    <!-- 数据表格 -->
    <el-table
        class="data-table"
        row-key="id"
        :data="tableData.value"
        border
        style="width: 100%; margin-top: 20px;overflow-x: auto"
        v-loading="table_loading"
        @selection-change="handleSelectionChange"
        :reserve-selection="true"
    >
      <!-- 添加多选列 -->
      <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
          align="center"
          fixed
      />
      <el-table-column
          v-for="(value, key) in get_reportInfo"
          :key="key"
          :prop="key"
          :label="value.verbose_name"
          :width="value.width || 120"
          align="center"
      ></el-table-column>

      <el-table-column prop="attachment" label="附件" width="150" align="center">
        <template #default="scope">
          <div class="attachment-cell">
            <a
                :href="scope.row.attachment"
                target="_blank"
                class="attachment-link"
            >{{ scope.row.attachmentText || '附件' }}</a>
            <el-button
                type="primary"
                size="small"
                @click="handleFileUpload(scope.row)"
                class="upload-btn"
            >上传
            </el-button>
          </div>
        </template>
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="260"
          align="center"
      >
        <template #default="scope">
          <div class="action-container">
            <!-- 基础操作按钮组 -->
            <div class="basic-actions">
              <el-button
                  type="text"
                  size="small"
                  @click="handleClickDelete(scope.row)"
                  class="action-btn delete-btn"
              >
                删除
              </el-button>
              <el-button
                  type="text"
                  size="small"
                  @click="handleClickEdit(scope.row)"
                  class="action-btn edit-btn"
              >
                编辑
              </el-button>
            </div>

            <!-- 审批按钮组 -->
            <div class="approve-actions">
              <div class="approve-row">
                <el-button
                    type="success"
                    size="mini"
                    @click="handleClickApproveOK1([scope.row])"
                    class="approve-btn"
                >
                  教务通过
                </el-button>
                <el-button
                    type="danger"
                    size="mini"
                    @click="handleClickApproveNO1([scope.row])"
                    class="approve-btn"
                >
                  教务拒绝
                </el-button>
              </div>
              <div class="approve-row">
                <el-button
                    type="success"
                    size="mini"
                    @click="handleClickApproveOK2([scope.row])"
                    class="approve-btn"
                >
                  系部通过
                </el-button>
                <el-button
                    type="danger"
                    size="mini"
                    @click="handleClickApproveNO2([scope.row])"
                    class="approve-btn"
                >
                  系部拒绝
                </el-button>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
          v-model:currentPage="filterForm.page"
          :page-size="10"
          layout="prev, pager, next"
          :total="total_datas"
          @current-change="handleCurrentChange"
          background
      />
    </div>


    <!-- 弹窗组件 -->
    <AddData :isAdmin="true"
             @refresh-table="handleSucceedAdd"
             ref="addDataComponent"
    />
    <EditData :isAdmin="true"
              @refresh-table="handleSucceedEdit"
              ref="editDataComponent"
    />

    <!-- 文件上传 -->
    <input
        type="file"
        style="display: none;"
        ref="fileInput"
        @change="onFileSelected"
    />
  </div>
</template>

<script setup>
import {ref, onMounted, watchEffect, onBeforeUnmount, reactive} from 'vue';
import setting from '@/setting.js';
import eventBus from "@/event-bus.js";
import {ElMessage, ElMessageBox} from "element-plus";

import global, {formDataApi, jsonApi} from "@/global.js";
import AddData from "@/components/Main/TeachingAffairsManagement/CourseAdjustmentManagement/public_tools/AddData.vue";
import EditData from "@/components/Main/TeachingAffairsManagement/CourseAdjustmentManagement/public_tools/EditData.vue";

const props = defineProps({
  tableType: {
    type: String,
    required: true
  }
});
const filterForm = reactive({
  start_date: '',
  end_date: '',
  revstatus: '',
  department_approval: '',
  teacher_name: '',
  page: 1,
});
// State
const reportInfo = ref({});
const get_reportInfo = ref({});
const tableData = reactive([]);
let orgTableData = null;//原始数据，其中的json没有经过json.parse
const fileInput = ref(null);
let currentRow = ref(null);
let total_datas = ref(0);
//loading
const table_loading = ref(false);
//子组件对象声明
const addDataComponent = ref(null);
const editDataComponent = ref(null);

//储存已经选择的row
let selectedRows = ref([]);

const editInfo = reactive({
  editData: null,
  ID: null,
});
onMounted(() => {
  //开启接收事件监听
  // 获取当前日期
// 设置结束日期为今天
  const now = new Date();
// 获取本地时区的年、月、日、时、分、秒
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要+1，并且补零
  const date = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  // 拼接成 "yyyy-MM-dd HH:mm:ss" 格式
  filterForm.end_date = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
// 判断当前日期属于哪个学期，并设置起始日期
  let start_date;
  if (now.getMonth() >= 7) { // 当前时间是8月到12月之间，开学时间应为8月1日
    start_date = new Date(now.getFullYear(), 7, 1); // 设置时间为8月1日
  } else if (now.getMonth() < 2) { // 当前时间是1月到1月，开学时间应为去年8月1日
    start_date = new Date(now.getFullYear() - 1, 7, 1); // 设置时间为去年8月1日
  } else { // 当前时间是2月到7月之间，开学时间应为2月1日
    start_date = new Date(now.getFullYear(), 1, 1); // 设置时间为2月1日
  }

  // 手动格式化日期为 "YYYY-MM-DD" 格式
  function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }

  // 设置filterForm.start_date为计算出的学期开始日期
  filterForm.start_date = formatDate(start_date);
});

onBeforeUnmount(() => {
  //关闭事件监听

});

const handleFilter = () => {
  // 获取筛选条件
  getDataWithAccessToken(props.tableType);
};
const handleSelectionChange = (selection) => {
  if (selection.length > 0) {
    selectedRows.value = selection;
    console.log(selection);
  } else {
    selectedRows.value = [];
  }
}
const handleDownloadExcel = async () => {
  //获取所有用户的当前的分数excelFile
  const requestBody = {
    "users": [],
    "interval": [0, 100000000],
    "start_time": filterForm.start_date,
    "end_time": filterForm.end_date // 使用绑定的结束时间
  };
  try {
    // 使用fetch API发起请求，以获取Excel文件
    const response = await jsonApi('/courseadjustmentmanagement/Downloadexcelforadmin/', JSON.stringify(requestBody));

    // 检查HTTP响应状态
    if (!response.ok) {
      const errorMessage = await response.text();
      ElMessage({
        message: '获取数据失败',
        type: 'error',
        duration: 2000
      });
    }

    // 创建一个blob对象，它表示了一段不可变的原始数据
    const blob = await response.blob();

    // 创建一个链接元素，用于下载文件
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;

    // 设置下载的文件名，确保服务器在响应头中设置了正确的文件名
    let fileName = 'downloaded.xlsx'; // 默认文件名
    const contentDisposition = response.headers.get('content-disposition');
    if (contentDisposition) {
      const fileNameMatch = contentDisposition.match(/filename="?([^"]*)"?$/);
      if (fileNameMatch) {
        fileName = fileNameMatch[1]; // 使用从响应头中提取的文件名
      }
    }

    a.download = fileName;

    // 触发下载
    document.body.appendChild(a);
    a.click();

    // 清理资源
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);

  } catch (error) {
    // 错误处理
    console.error('发生错误:', error);
  }
}


// Methods
const handleAddData = () => {
  addDataComponent.value.dialogVisibleAdd = true;
};
const handleSucceedAdd = () => {
  ElMessage({
    message: '添加成功',
    type: 'success',
  });
  refreshTable();
};
const handleSucceedEdit = () => {
  ElMessage({
    message: '编辑成功',
    type: 'success',
  });
  refreshTable();
};
const handleCurrentChange = (currentPage) => {
  // 更新当前页码
  filterForm.page = currentPage;
  // 重新加载数据
  getDataWithAccessToken(props.tableType);
};

const getDataWithAccessToken = async () => {
  const requestBody = {
    start_time: filterForm.start_date,
    end_time: filterForm.end_date,
    revstatus: filterForm.revstatus,
    teacher_name: filterForm.teacher_name,
    department_approval: filterForm.department_approval,
    page: filterForm.page,
  };

  try {
    table_loading.value = true;
    const response = await jsonApi('/courseadjustmentmanagement/getforadmin/', JSON.stringify(requestBody));
    let orgdata = await response.json();
    const data = orgdata['datas'];
    total_datas = orgdata['total_datas'];
    orgTableData = JSON.parse(JSON.stringify(data));
    if (!response.ok) {
      showError('获取数据失败', data.error, 2000);
    } else {
      tableData.value = data; // 假设返回的数据直接用于表格
      //每行增加loading字段
      tableData.value.forEach(item => {
        item.loading = false;
      });

    }
    table_loading.value = false;
  } catch (error) {
    console.error(error);
    table_loading.value = false;
  }
};
const getCourseadJustmentInfo = async () => {
  //获取字段
  if (!localStorage.getItem('CourseadJustmentInfo')) {
    const response = await jsonApi('/courseadjustmentmanagement/getmodelfields/', "");
    const data = await response.json();
    console.log(data);
    if (response.ok) {
      localStorage.setItem('CourseadJustmentInfo', JSON.stringify(data));
      await getCourseadJustmentInfo();
    } else {
      ElMessage(
          {
            message: '获取数据失败',
            type: 'error',
            duration: 2000,
          }
      );
    }
  }
  //将字符串转为对象
  reportInfo.value = JSON.parse(localStorage.getItem('CourseadJustmentInfo'));
  get_reportInfo.value = reportInfo.value['TeacherChangeClassRecord']
  const get_excludeFields = ['model_name', 'attachment'];
  // 使用 forEach 循环来遍历对象的所有键
  get_excludeFields.forEach(field => {
    // 如果报告信息中存在要排除的字段，则删除它
    if (get_reportInfo.value.hasOwnProperty(field)) {
      delete get_reportInfo.value[field];
    }
  });
  console.log(get_reportInfo.value);
}


//删除表格数据
const handleClickDelete = async (row) => {

  try {
    const requestBody = {"id": row.id, "Report": props.tableType};
    const response = await jsonApi('/courseadjustmentmanagement/deleteforadmin/', JSON.stringify(requestBody));
    const data = await response.json();

    if (data.code === 'token_not_valid') {
      if (await global.refreshAndRetry()) {
        //成功刷新重新执行
        await self.handleClickDelete();
      }
    } else if (!response.ok) {
      ElMessage({
        type: 'error',
        message: data.error || '删除失败'
      });
    } else {
      await refreshTable();
      ElMessage({
        type: 'success',
        message: '删除成功!'
      });
    }
  } catch (error) {
    console.error('删除过程中发生错误:', error);
    ElMessage({
      type: 'error',
      message: '网络错误，请重试'
    });
  }
}
//修改表格数据相关
const handleClickEdit = async (row) => {
  let data;
  // 返回orgTableData中的id==row.id的数据
  data = orgTableData.find(item => item.id === row.id);
  //修改当前表格行的数据，将会弹出一个上文的<el-dialog>，这个表单具有当前行的数据
  editInfo.editData = data;
  editInfo.ID = row.id;
  editDataComponent.value.openComponent(editInfo);
}


// 上传相关
const handleFileUpload = async (row) => {
  // 触发隐藏的 file input 的点击事件，以打开文件选择对话框
  fileInput.value.click();
  // 你可能需要在这里以某种方式将当前行数据传递给文件上传处理函数
  // 例如，可以将 row 保存在一个组件的数据属性中，以便稍后在文件选择后使用
  currentRow = row;
};
const onFileSelected = async (event) => {
  const file = event.target.files[0];
  if (file) {
    //检查file是不是pdf或者zip
    if (file.type === 'application/pdf' || file.type === 'application/zip') {
      // 显示上传进度
      // 在这里处理文件上传逻辑
      await uploadFile(currentRow, file);
    } else {
      // 显示错误消息
      ElMessage.error('请选择PDF或ZIP文件');
    }


  }
};
const uploadFile = async (row, file) => {
  // 创建 FormData 对象，并添加文件和其他可能需要的数据
  const formData = new FormData();
  const accessToken = localStorage.getItem('access_token');
  formData.append('file', file);
  formData.append('id', row.id); // 假设每一行数据有一个唯一的 id
  formData.append('Report', props.tableType); // 假设每一行数据有一个唯一的 id
  // 使用 Axios、Fetch API 或 XMLHttpRequest 发送文件到服务器
  try {
    // const response = await fetch(setting.API_URL + '/reportmanager/upload/', {
    //   method: 'POST',
    //   body: formData,
    //   headers: {
    //     'Authorization': `Bearer ${accessToken}`,
    //   },
    // });
    const response = await formDataApi('/courseadjustmentmanagement/uploadforadmin/', formData)
    const data = await response.json();
    console.log(data);
    if (!response.ok) {
      ElMessage({
        type: 'error',
        message: data.error
      });


      throw new Error(`HTTP error! data: ${data}`);

    } else {
      ElMessage({
        type: 'success',
        message: '上传成功!'
      });
      await refreshTable();
      console.log('File uploaded successfully', data);

    }


  } catch (error) {
    console.error('文件上传失败', error);
  }
};

//审批
//审核
const handleClickApproveOK1 = async (rows) => {
  /*
  * {
    "Report": "TeacherCompetition",
    "ids":[4],
    "revstatus":"审核通过"
}
* /reportmanager/approval/
*
* */
  try {
    let rows_ids = [];
    for (let row of rows) {
      row.loading = true;
      rows_ids.push(row.id);

    }
    const requestBody = {"approved_type": 1, "ids": rows_ids, "revstatus": "已批准"};
    const response = await jsonApi('/courseadjustmentmanagement/approvalforadmin/', JSON.stringify(requestBody));
    const data = await response.json();
    if (data.code === 'token_not_valid') {
      if (await global.refreshAndRetry()) {
        await handleClickApproveOK(); // 假设你的提交函数
      }
    } else if (response.ok) {
      ElMessage({
        type: 'success',
        message: data.message
      });
      await refreshTable();
      for (let row of rows) {
        row.loading = false;

      }
    } else {

      ElMessage({
        type: 'error',
        message: data.error || '审核失败'
      });
      for (let row of rows) {
        row.loading = false;

      }
    }
  } catch (error) {
    ElMessage(
        () => {
          for (let row of rows) {
            row.loading = false;

          }
          return '审核过程中发生错误' + error;
        }
    );
    for (let row of rows) {
      row.loading = false;

    }
  }
}
//不审核
const handleClickApproveNO1 = async (rows) => {
  /*
    * {
      "Report": "TeacherCompetition",
      "id":4,
      "revstatus":"审核通过"
  }
  * /reportmanager/approval/
  *
  * */
  try {
    let rows_ids = [];
    for (let row of rows) {
      row.loading = true;
      rows_ids.push(row.id);

    }
    const requestBody = {"approved_type": 1, "ids": rows_ids, "revstatus": "已拒绝"};
    const response = await jsonApi('/courseadjustmentmanagement/approvalforadmin/', JSON.stringify(requestBody));
    const data = await response.json();
    if (data.code === 'token_not_valid') {
      if (await global.refreshAndRetry()) {
        await handleClickApproveOK(); // 假设你的提交函数
      }
    } else if (!response.ok) {
      ElMessage({
        type: 'error',
        message: data.error || '审核失败'
      });
      for (let row of rows) {
        row.loading = false;

      }
    } else {
      await refreshTable();
      ElMessage({
        type: 'success',
        message: '成功审核!'
      });
      for (let row of rows) {
        row.loading = false;

      }
    }
  } catch (error) {
    ElMessage(
        () => {
          for (let row of rows) {
            row.loading = false;

          }
          return '审核过程中发生错误' + error;
        }
    )
    for (let row of rows) {
      row.loading = false;

    }
  }

}

const handleClickApproveOK2 = async (rows) => {
  /*
  * {
    "Report": "TeacherCompetition",
    "ids":[4],
    "revstatus":"审核通过"
}
* /reportmanager/approval/
*
* */
  try {
    let rows_ids = [];
    for (let row of rows) {
      row.loading = true;
      rows_ids.push(row.id);

    }
    const requestBody = {"approved_type": 2, "ids": rows_ids, "department_approval": "已批准"};
    const response = await jsonApi('/courseadjustmentmanagement/approvalforadmin/', JSON.stringify(requestBody));
    const data = await response.json();
    if (data.code === 'token_not_valid') {
      if (await global.refreshAndRetry()) {
        await handleClickApproveOK2(); // 假设你的提交函数
      }
    } else if (response.ok) {
      ElMessage({
        type: 'success',
        message: data.message
      });
      await refreshTable();
      for (let row of rows) {
        row.loading = false;

      }
    } else {

      ElMessage({
        type: 'error',
        message: data.error || '审核失败'
      });
      for (let row of rows) {
        row.loading = false;

      }
    }
  } catch (error) {
    ElMessage(
        () => {
          for (let row of rows) {
            row.loading = false;

          }
          return '审核过程中发生错误' + error;
        }
    );
    for (let row of rows) {
      row.loading = false;

    }
  }
}
//不审核
const handleClickApproveNO2 = async (rows) => {
  /*
    * {
      "id":4,
      "revstatus":"审核通过"
  }
  * /reportmanager/approval/
  *
  * */
  try {
    let rows_ids = [];
    for (let row of rows) {
      row.loading = true;
      rows_ids.push(row.id);

    }
    const requestBody = {"approved_type": 2, "ids": rows_ids, "department_approval": "已拒绝"};
    const response = await jsonApi('/courseadjustmentmanagement/approvalforadmin/', JSON.stringify(requestBody));
    const data = await response.json();
    if (data.code === 'token_not_valid') {
      if (await global.refreshAndRetry()) {
        await handleClickApproveNO2(); // 假设你的提交函数
      }
    } else if (!response.ok) {
      ElMessage({
        type: 'error',
        message: data.error || '审核失败'
      });
      for (let row of rows) {
        row.loading = false;

      }
    } else {
      await refreshTable();
      ElMessage({
        type: 'success',
        message: '成功审核!'
      });
      for (let row of rows) {
        row.loading = false;

      }
    }
  } catch (error) {
    ElMessage(
        () => {
          for (let row of rows) {
            row.loading = false;

          }
          return '审核过程中发生错误' + error;
        }
    );
    for (let row of rows) {
      row.loading = false;

    }
  }
}


//刷新表格获取新数据
const refreshTable = async () => {
  // 获取新的数据
  filterForm.end_date = new Date(Date.now() + 86400000).toISOString();
  await getDataWithAccessToken();
};


watchEffect(async () => {
  await getCourseadJustmentInfo();
  await getDataWithAccessToken();
  selectedRows.value = [];
  // 监听表格数据变化时清空选中


});

function showError(message, error, duration) {
  console.error(message, error);
  // 实现错误展示逻辑，例如使用通知组件
}
</script>

<style scoped>
/* 全新设计的高级样式 */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.primary-action {
  display: flex;
  align-items: center;
  gap: 12px;

}

.primary-action .el-button {
  transition: all 0.3s ease;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 500;
}

.filter-panel {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  margin-bottom: 20px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  align-items: end;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.form-item1{
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-left: 200px;
}
.form-item2{
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-left: 120px;
}
.form-item3{
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-left: 50px;
}
.form-label {
  width: 100px;
  font-weight: 600;
  color: #2c3e50;
  font-size: 0.875rem;
}

.date-range {
  display: flex;
  gap: 12px;
  align-items: center;
}

.date-range .el-date-editor {
  flex: 1;
}

.advanced-options {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.batch-actions {
  margin: 16px 0;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.3s;
}
.batch-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}


.batch-actions:hover {
  background: #e9eff4;
}

.action-count {
  color: #1a73e8;
  font-weight: 500;
  margin-left: auto;
  padding-left: 16px;
}
.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.approve-btn {
  margin-left: 4px;
  padding: 5px 8px;
  font-size: 12px;
}
.action-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.basic-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.approve-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.approve-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.action-btn {
  padding: 5px 8px;
  font-size: 12px;
}

.delete-btn {
  color: #f56c6c;
}

.edit-btn {
  color: #409eff;
}

.approve-btn {
  padding: 5px 8px;
  font-size: 12px;
  min-width: 70px;
}
.action-btn {
  padding: 0 8px;
}
.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.3s;
}

.dropdown-trigger:hover {
  background: #ecf2ff;
}

.dropdown-icon {
  transition: transform 0.3s;
}

.dropdown-trigger:hover .dropdown-icon {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .date-range {
    flex-direction: column;
    align-items: stretch;
  }

  .date-range .el-date-editor {
    width: 100%;
  }

  .advanced-options {
    flex-direction: column;
    gap: 8px;
  }
}
</style>